<!--此组件为每个容器组件右下角的操作按钮---为公有组件-->
<template>
  <div class="container-wrapper" :class="[customClass]">
    <slot></slot>

    <div class="container-action" v-if="designer.selectedId === widget.id && !widget.internal">
      <i class="el-icon-back" title="选中父组件" @click.stop="selectParentWidget(widget)"/>

      <i v-if="!!parentList && (parentList.length > 1)" class="el-icon-top" title="上移组件" @click.stop="moveUpWidget()"/>

      <i v-if="!!parentList && (parentList.length > 1)" class="el-icon-bottom" title="下移组件"
         @click.stop="moveDownWidget()"/>

      <i v-if="widget.type === 'table'" class="iconfont icon-insertrow" title="插入新行"
         @click.stop="appendTableRow(widget)"/>

      <i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" title="插入新列"
         @click.stop="appendTableCol(widget)"/>

      <i  v-if="(widget.type === 'grid') || (widget.type === 'table')" class="el-icon-copy-document"
         title="复制组件" @click.stop="cloneContainer(widget)"/>

      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"/>

    </div>
    <div class="drag-handler" v-if="designer.selectedId === widget.id && !widget.internal">
      <i class="el-icon-rank" title="拖拽手柄"/>
      <i>{{i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`)}}</i>
      <template v-if="(widget.options.hidden)">
        <i class="iconfont icon-hide"/>
        <i>隐藏</i>
      </template>
    </div>
  </div>
</template>

<script>
import i18n from "@/utils/vue-i18n/i18n";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";

export default {
  name: "ContainerWrapper",

  // mixins: [i18n,containerMixin],
  mixins: [i18n],
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },

  data() {
    return {
      constantDic: constantDic
    };
  },

  computed: {
    customClass() {
      return !!(this.widget.options.customClass) ? this.widget.options.customClass.join(' ') : ''
    },
  }
}
</script>

<style lang="scss" scoped>
.container-wrapper {
  position: relative;
  margin-bottom: 5px;

  .container-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: #5cadff;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }
  .drag-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: #5cadff;
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }
  }
}
</style>
